<template>
  <div>
    <!-- 背景区域 -->
    <div
      :style="{
        height: `140px`,
        backgroundImage: `url(${userInfo.bgImage})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
      }"
      class="w-full h-full relative z-10 top-0 left-0 rounded-t"
    >
      <!-- 头像 -->
      <div class="w-full absolute bottom-2 flex flex-row justify-between items-center px-3 text-white">
        <div class="flex flex-row items-center gap-3">
          <n-avatar round :size="48" :src="userInfo.avatar" />
          <div>
            <p class="text-xl font-semibold">
              {{ userInfo.name }}
              <component :is="Gender(userInfo.gender)"></component>
            </p>
            <p class="text-xs mt-1">账号 {{ userInfo.uuid }}</p>
          </div>
        </div>
        <!-- 点赞 -->
        <div class="cursor-pointer">
          <i class="iconfont icon-dianzan"></i>
          999+
        </div>
      </div>
    </div>
    <!-- 信息区域 -->
    <div class="w-full m-auto z-20 px-4 text-fontPrimary">
      <DescriptionItem label="签名"
        ><span class="text-xs">{{ userInfo.sign }}</span>
      </DescriptionItem>
      <DescriptionItem label="所在地">
        <div class="text-xs">
          {{ userInfo.address }}
        </div>
      </DescriptionItem>
      <DescriptionItem label="Nexa动态">
        <div class="text-xs flex flex-row justify-between items-center cursor-pointer">
          <span>查看我的动态</span>
          <n-icon color="lightGrey">
            <ArrowForward />
          </n-icon>
        </div>
      </DescriptionItem>
    </div>
    <!-- 按钮 -->
    <div v-if="userInfo.id != user.userId" class="text-center mt-4">
      <el-button class="w-[60%]" size="small" type="primary">发送消息 </el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useUser } from "@/store/modules/user.ts";
import { IGroupMemberInfo } from "@/types/group";
import { Gender } from "@/utils/common";
import { NAvatar, NIcon } from "naive-ui";
import { ArrowForward } from "@vicons/ionicons5";
import DescriptionItem from "@/layout/Left/components/DescriptionItem.vue";

const user = useUser();
withDefaults(
  defineProps<{
    userInfo: IGroupMemberInfo;
  }>(),
  {},
);
</script>

<style lang="scss" scoped></style>
